<template>
    <div class="container">
        <h1>选择国家 / 地区 / 客户</h1>
        <el-select v-model="country" class="m-2" placeholder="选择国家">
            <el-option
                v-for="item in countries"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>

        <el-select v-model="area" class="m-2" placeholder="选择地区">
            <el-option
                v-for="item in areas"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>

        <el-select v-model="customer" class="m-2" placeholder="选择客户">
            <el-option
                v-for="item in customers"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
    </div>
</template>

<script>
import { computed } from 'vue';

export default {
    emits: ['update:country', 'update:area', 'update:customer'],
    props: ['country', 'countries', 'area', 'areas', 'customer', 'customers'],
    setup(props, { emit }) {
        const country = computed({
            get() {
                return props.country;
            },
            set(value) {
                emit('update:country', value);
            },
        });

        const area = computed({
            get() {
                return props.area;
            },
            set(value) {
                emit('update:area', value);
            },
        });

        const customer = computed({
            get() {
                return props.customer;
            },
            set(value) {
                emit('update:customer', value);
            },
        });

        return {
            country,
            area,
            customer,
        };
    },
};
</script>

<style>
.m-2 {
    margin: 0.5em;
}

.container {
    padding: 1em;
    border: 1px solid red;
}
</style>
